<template>
	<view class="adressInfo">
		<u-form :model="form" ref="uForm">
			<u-form-item label-width="150" label="地址" prop="shouAdress"  right-icon="arrow-right" required>
				<u-input v-model="form.shouAdress" placeholder="点击搜索地址"/>
			</u-form-item>
			<u-form-item label-width="150" label="门牌号" prop="doorNumber" >
				<u-input v-model="form.doorNumber" placeholder="宿舍楼号"/>
			</u-form-item>
			<u-form-item label-width="150" label="联系人" prop="connectionPeople" >
				<u-input v-model="form.connectionPeople" placeholder="联系人姓名"/>
			</u-form-item>
			<u-form-item label-width="150" label="电话" prop="phone" required>
				<u-input v-model="form.phone" placeholder="手机号"/>
			</u-form-item>
		</u-form>
		
		<u-button @click="submit">保存并使用</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				shouAdress: '',
				doorNumber: '',
				connectionPeople:'',
				phone:''
			},
			rules: {
				shouAdress: [
					{ 
						required: true, 
						message: '点击填写地址', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
				
				phone: [
					{
						message: '请输入手机号', 
						min: 11,
						max: 11, 
						trigger: 'change'
					}
				]
			}
		};
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
					uni.navigateTo({
						url: '/pages/index/jisong/songSubmit'
					});
				} else {
					console.log('验证失败');
				}
			});
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>
<style lang="scss" scoped>
	.adressInfo{
		padding: 30rpx;
	}
	
</style>